<template>
    <div>
        <el-row>
            <el-col :span="6">
                <div>
                    <el-tree :data="categoryTreeList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                </div>
            </el-col>
            <el-col :span="18">
                <div>
                    <div>{{ currentSelectCategory.categoryName }}</div>
                    <el-button type="primary" plain @click="handleAdd">添加菜品</el-button>
                    <div class="table-class">
                        <el-table :data="dishList" border style="width: 100%">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-table :data="props.row.specifications" border style="width: 50%" max-height="250">
                                        <el-table-column fixed prop="id" label="ID">
                                        </el-table-column>
                                        <el-table-column prop="specificationName" label="规格名称">
                                        </el-table-column>
                                        <el-table-column prop="dataList" :formatter="dataListFormatter" label="规格项">
                                        </el-table-column>
                                    </el-table>
                                </template>
                            </el-table-column>
                            <el-table-column prop="id" label="ID">
                            </el-table-column>
                            <el-table-column prop="dishName" label="名称">
                            </el-table-column>
                            <el-table-column prop="categoryName" label="所属分类">
                            </el-table-column>
                            <el-table-column prop="price" label="价格">
                            </el-table-column>
                            <el-table-column label="图片">
                                <template slot-scope="scope">
                                    <el-image style="width: 50px; height: 50px" :src="scope.row.image"
                                        :preview-src-list="[scope.row.image]" fit="fill"></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="description" label="描述">
                            </el-table-column>
                            <el-table-column prop="sequence" label="排序">
                            </el-table-column>
                            <el-table-column label="状态">
                                <template slot-scope="scope">
                                    <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                                        active-color="#13ce66" inactive-color="#ff4949" disabled>
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="100">
                                <template slot-scope="scope">
                                    <el-button @click="handleUpdate(scope.row.id)" type="text" size="small">编辑</el-button>
                                    <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info"
                                        icon-color="red" title="这是一段内容确定删除吗？" @onConfirm="delDish(scope.row.id)">
                                        <el-button slot="reference" type="text" size="small">删除</el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination background layout="total,prev, pager, next,sizes" :total="page.total"
                            :page-size.sync="page.size" :pager-count="5" :current-page.sync="page.page"
                            :page-sizes="[1, 10, 20, 50, 100, 500]" @current-change="pageChange" @prev-click="page.page--"
                            @next-click="page.page++" @size-change="sizeChange" :hide-on-single-page="false">
                        </el-pagination>
                    </div>
                </div>
            </el-col>
        </el-row>


    </div>
</template>

<script>
import { dish_page, dish_delete } from '@/api/dish';
import { list } from '@/api/category';
export default {
    //import引入组件才能使用
    components: {},
    props: {},
    data() {
        return {
            page: {
                page: 1,
                size: 1,
                total: 0
            },
            categoryTreeList: [],
            defaultProps: {
                children: 'children',
                label: 'categoryName'
            },
            dishList: [],
            currentSelectCategory: {}
        };
    },
    // 计算属性
    computed: {},
    // 监听data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        pageChange(page) {
            this.page.page = page
            this.initPage()
        },
        sizeChange(size) {
            this.page.size = size
            this.initPage()
        },
        initPage() {
            dish_page({ ...this.page, categoryId: this.currentSelectCategory.id }).then(res => {
                this.dishList = res.data.list
                this.page.total = res.data.total
            })
        },
        handleNodeClick(data) {
            this.currentSelectCategory = data
            this.initPage()
        },
        handleAdd() {
            this.$router.push({
                name: '/dish/add',
                params: {
                    categoryId: this.currentSelectCategory.id || 0
                }
            })
        },
        handleUpdate(id) {
            this.$router.push({
                name: '/dish/update',
                params: {
                    categoryId: this.currentSelectCategory.id || 0,
                    id
                }
            })
        },
        delDish(id) {
            dish_delete(id).then(res => {
                this.$message.success('删除成功')
                this.initPage()
            }).catch(err => {
                this.$message.error(err || '删除失败')
            })
        },
        dataListFormatter(row, column, cellValue, index) {
            return JSON.parse(row.dataList).join(',')
        },
    },
    // 生命周期，创建完成时（可以访问当前this实例）
    created() {
        list().then(res => {
            this.categoryTreeList = res.data
            this.categoryTreeList.unshift({ categoryName: '全部' })
            this.currentSelectCategory = this.categoryTreeList[0]
        })
        this.initPage()
    },
    // 生命周期：挂载完成时（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { },//生命周期：创建之前
    beforeMount() { },//生命周期：挂载之前
    beforeUpdate() { },//生命周期：更新之前
    updated() { },//生命周期：更新之后
    beforeDestroy() { },//生命周期：销毁之前
    destroyed() { },//生命周期：销毁完成
    activated() { },//如果页面有keep-alive缓存功能，这个函数会触发执行
}
</script>
<style scoped></style>